<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Event</title>
    </head>
    <body>
        <div id="ev">
            <style media="screen">
                #ev {
                    width: 300px;
                    height: 100px;
                    background: red;
                    color: #fff;
                    text-align: center;
                    line-height: 100px;
                }
            </style>
            目标元素
        </div>
        <div>
            addEventListener <br />
            useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
            <br />
            false- (false- 默认)。事件句柄在冒泡阶段执行 从底向上<br /><br />
            true - 事件句柄在捕获阶段执行 自顶向下 <br /><br />
        </div>
        <script type="text/javascript">
            var ev = document.getElementById('ev');

            ev.addEventListener(
                'click',
                function (e) {
                    console.log('ev 捕获');
                },
                true
            );

            window.addEventListener(
                'click',
                function (e) {
                    console.log('window 捕获');
                },
                true
            );

            document.addEventListener(
                'click',
                function (e) {
                    console.log('document 捕获');
                },
                true
            );

            document.documentElement.addEventListener(
                'click',
                function (e) {
                    console.log('html 捕获');
                },
                true
            );

            document.body.addEventListener(
                'click',
                function (e) {
                    console.log('body 捕获');
                },
                true
            );

            ev.addEventListener(
                'click',
                function (e) {
                    console.log('ev 冒泡');
                },
                false
            );

            window.addEventListener(
                'click',
                function (e) {
                    console.log('window 冒泡');
                },
                false
            );

            document.addEventListener(
                'click',
                function (e) {
                    console.log('document 冒泡');
                },
                false
            );

            document.documentElement.addEventListener(
                'click',
                function (e) {
                    console.log('html 冒泡');
                },
                false
            );

            document.body.addEventListener(
                'click',
                function (e) {
                    console.log('body 冒泡');
                },
                false
            );

            var eve = new Event('test');
            ev.addEventListener('test', function () {
                console.log('test dispatch');
            });
            setTimeout(function () {
                ev.dispatchEvent(eve);
            }, 1000);
        </script>
    </body>
</html>
